<template>
  <div class="auto select-overspread" style="margin-left: 25px; border: 1px solid #EEF3F6">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <!-- <p class="bg-info text-center" style="padding: 8px;">分配信息</p> -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">分配信息</a></li>
        </ul>
        <div class="row" style="margin-top:10px;">
          <label for="f_user" class="col-sm-3 control-label">票据使用人</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_user"
              v-model="model.f_user"
              :options='user'
              placeholder='请选择'
              v-model="model.f_user"
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_operator"  class="col-sm-3 control-label">票据分配人</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_operator"
              v-model="model.f_operator"
              :options='operates'
              placeholder='请选择'
              v-model="model.f_operator"
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_operator"  class="col-sm-3 control-label">票据类型</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_bill_type"
              v-model="model.f_bill_type"
              :options='printtypes'
              placeholder='请选择'
              v-model="model.f_bill_type"
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_start_number" class="col-sm-3 control-label">起始发票号</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_start_number" placeholder='0'>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_end_number" class="col-sm-3 control-label">终止发票号</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_end_number" placeholder='0' :disabled="zzfph">
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_number" class="col-sm-3 control-label">收据总份数</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="number" placeholder='0' disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_bill_number" class="col-sm-3 control-label">收费代码</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_bill_number" placeholder='0'>
          </div>
        </div>
      </form>
      <div style="text-align:right;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success width-100" @click="confirm()" v-if='cxfp' :disabled='!$v.valid'>重新分配</button>
        <button class="btn btn-success width-60" @click="confirm()"  v-if='qr' :disabled='!$v.valid'>确认</button>
        <button class="btn btn-default width-60" @click="clean()">取消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../../stores/AppData'
export default {
  title: '重新分配',
  data () {
    return {
      model: {
        f_number: 0,
        f_start_number: '',
        f_bill_number: AppData.getSingleValue('默认收据代码'),
        f_operator: [''],
        f_bill_type: [''],
        f_user: ['']
      },
      start: true,
      cxfp: false,
      qr: true,
      zzfph: false
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.model = Object.assign({}, this.model, val)
      if (val) {
        this.model.f_user = this.model.f_user ? [this.model.f_user] : ['']
        this.model.f_operator = this.model.f_operator ? [this.model.f_operator] : ['']
        this.model.f_bill_type = this.model.f_bill_type ? [this.model.f_bill_type] : ['']
        this.model.f_start_number = val.f_bill_id + 1
      }
    },
    'model.id' (val) {
      if (val) {
        this.cxfp = true
        this.qr = false
        this.zzfph = true
      } else {
        this.cxfp = false
        this.qr = true
      }
    }
  },
  ready () {
    this.model = Object.assign({}, this.model, this.data)
    if (this.data) {
      this.model.f_user = this.model.f_user ? [this.model.f_user] : ['']
      this.model.f_operator = this.model.f_operator ? [this.model.f_operator] : ['']
      this.model.f_bill_type = this.model.f_bill_type ? [this.model.f_bill_type] : ['']
      this.model.f_start_number = this.data.f_bill_id + 1
    }
  },
  methods: {
    initModel () {
      return {
        id: '',
        f_user: '',
        f_operator: ['请选择'],
        f_start_number: '',
        f_bill_id: '',
        f_end_number: '',
        f_bill_type: '',
        f_bill_number: AppData.getSingleValue('默认收据代码')
      }
    },
    confirm () {
      this.model.f_number = this.number
      this.$BillService.replaceDistribution(this.model, this.data)
      .then(
        (res) => {
          this.model = this.initModel()
          this.zzfph = false
          this.$dispatch('success', '发票管理', this.data, res)
        }
      ).catch(
        (error) => {
          this.model = this.initModel()
          this.zzfph = false
          this.$dispatch('error', '发票管理', this.data, error)
        }
      )
    },
    clean () {
      this.model = this.initModel()
      this.zzfph = false
      this.$dispatch('clean', this.data)
    }
  },
  computed: {
    'number' () {
      return this.model.f_end_number - this.model.f_start_number + 1
    },
    'operates' () {
      return AppData.getParam('票据分配人')
    },
    'user' () {
      return AppData.getParam('票据使用人')
    },
    'printtypes' () {
      return AppData.getParam('打印格式')
    }
  }
}
</script>

<style>
</style>
